<template>
  <div :id="containerId"></div>
  <div>111</div>
<!--  <div id="container"></div>-->
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { ElMessage } from 'element-plus'
let map = null;

const containerId = `container-${Date.now()}`;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "02c74949d973a3d48dea2811ce9c126a",
  };


  AMapLoader.load({
    key: "82903b8b4ecaad2c03dfa5478cfa5bf8", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
      .then((AMap) => {
        map = new AMap.Map(containerId, {
        // map = new AMap.Map("container", {
          // 设置地图容器id
          resizeEnable: true,
          zoom: 15, // 初始化地图级别
        });

        AMap.plugin('AMap.Geolocation', function() {
          var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认：true
            timeout: 10000, // 设置定位超时时间，默认：无穷大
            offset: [10, 20],  // 定位按钮的停靠位置的偏移量
            zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            position: 'RB', //  定位按钮的排放位置,  RB表示右下
            // zoomToAccuracy:true  ,
          })
          map.addControl(geolocation);
          geolocation.getCurrentPosition(
              function(status,result){
                if(status=='complete'){
                  onComplete(result)
                }else{
                  onError(result)
                }
              }
          );
        })
      })
});
onUnmounted(() => {
  map?.destroy();
});
function onError(data) {

  // ElMessage('定位失败')
  ElMessage(data.message)


}
function onComplete(data) {

  ElMessage('定位成功')

}

</script>

<style scoped>
#container {
  width: 100%;
  height: 400px;
}
div[id^="container-"] {
  width: 100%;
  height: 400px;
}
</style>
